<template>
    <div class="ml-16px mr-16px">
        <UserInfo />
        <div class="mt-16px">
            <el-row :gutter="16">
                <el-col :span="8">
                    <NewBusiness />
                </el-col>
                <el-col :span="8">
                    <Inquiry />
                </el-col>
                <el-col :span="8">
                    <Keyword />
                </el-col>
            </el-row>
        </div>
        <div class="mt-16px">
            <el-row :gutter="16">
                <el-col :span="16">
                    <AccountData />
                </el-col>
                <el-col :span="8">
                    <UserInteractionData />
                </el-col>
            </el-row>
        </div>
        <div class="mt-16px mb-16px">
            <el-row :gutter="16">
                <el-col :span="16">
                    <BusinessData />
                </el-col>
                <el-col :span="8">
                    <CustomerData />
                </el-col>
            </el-row>
        </div>
    </div>
    
</template>

<script setup lang="ts">
import UserInfo from './components/UserInfo.vue'
import NewBusiness from './components/NewBusiness.vue'
import Inquiry from './components/Inquiry.vue'
import Keyword from './components/Keyword.vue'
import AccountData from './components/AccountData.vue'
import UserInteractionData from './components/UserInteractionData.vue'
import BusinessData from './components/BusinessData.vue'
import CustomerData from './components/CustomerData.vue'
</script>

<style scoped>

</style>